<template>
  <view class="shortcut">
    <view class="shortcut-div" @click="myPoint">
      <u-icon :customStyle="{ marginRight: 24 + 'rpx' }" :name="icon.myPoint" :size="24" :label="language.FreeRide.myPoint" labelColor="rgba(51, 51, 51, 1)"></u-icon>
    </view>
    <view class="shortcut-div" @click="favorites">
      <u-icon :customStyle="{ marginRight: 24 + 'rpx' }" :name="icon.favorites" :size="24" :label="language.FreeRide.favorites" labelColor="rgba(51, 51, 51, 1)"></u-icon>
    </view>
    <view class="shortcut-div" @click="mapPoint">
      <u-icon :customStyle="{ marginRight: 24 + 'rpx' }" :name="icon.mapPoint" :size="24" :label="language.FreeRide.mapPoint" labelColor="rgba(51, 51, 51, 1)"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  name: 'shortcut',
  props: {
    language: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      icon: {
        // 我的位置
        myPoint: require('@/static/image/myPoint.png'),
        // 收藏夹
        favorites: require('@/static/image/favorites.png'),
        // 地图选点
        mapPoint: require('@/static/image/mapPoint.png'),
      }
    }
  },
  methods: {
    myPoint() {
      console.log('myPoint')
    },
    favorites() {
      console.log('favorites')
    },
    mapPoint() {
      console.log('mapPoint')
    }
  }
}
</script>

<style scoped lang="less">
.shortcut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  position: relative;
  overflow: auto;
  .shortcut-div {
    flex-shrink: 0;
  }
}
</style>
